<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xiangyinjie
  Date: 2021/5/8
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="utf-8">
    <title>前台注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath%>static/layui-v2.6.5/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/swee/sweetalert.css">
    <script type="text/javascript" src="<%=basePath%>static/swee/sweetalert-dev.js"></script>
    <style type="text/css">

        img {
            width: 25px;
            height: 25px;
        }

        #login {
            width: 600px;
            height: 500px;
            margin: 0 auto;
            background-color: #FFFFFF;
        }

        table {
            margin: 0 auto;
        }

        table tr td:first-child {
            text-align: center;
        }

        #login input {
            border: none;
            font-size: 18px;
            margin-top: 30px;
            margin-right: auto;
            border-bottom: 2px solid #009f95;
        }

        #biaoti {
            margin: 6px auto auto 240px;
            color: #009f95;
        }

        #queding {
            margin-left: 900px;
        }

    </style>
</head>
<body>
<div id="login">
    <h1 id="biaoti">华子医院信息登记</h1>
    <table>
        <tr>
            <td>请输入身份证号码：</td>
            <td><input type="text" name="idCard"></td>
        </tr>
        <tr>
            <td>请输入姓名：</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>请输入密码：</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td>请输入性别：</td>
            <td>
                <input type="radio" name="sex" id="radio1" value="男" checked="checked"/>
                <label for="radio1">男</label>
                <input type="radio" name="sex" id="radio2" value="女"/>
                <label for="radio2">女</label>
            </td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>电话号码：</td>
            <td><input type="text" name="phone" style="width:120px;">
                <button id="verification" type="submit" class="layui-btn" style="width:100px;background-color:#009f95;">
                    发送验证码
                </button>
            </td>
        </tr>
        <tr>
            <td>验证码：</td>
            <td><input type="text" name="verification"></td>
        </tr>
    </table>
</div>
<div id="queding">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius"
            style="background-color: #009f95;color: #FFFFFF" onclick="userlogin()">提交
    </button>
    <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"
            style="background-color: #009f95;color: #FFFFFF">重置
    </button>
</div>
<script src="<%=basePath%>static/layui-v2.6.5/layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath%>static/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
    let jieshou;

    function userlogin() {

        let $idCard = $("input[name='idCard']").val();
        let $name = $("input[name='name']").val();
        let $pwd = $("input[name='pwd']").val();
        let $sex = $("input[name='sex']:checked").val();
        let $age = $("input[name='age']").val();
        let $phone = $("input[name='phone']").val();
        let $verification = $("input[name='verification']").val();

        if ($idCard.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>身份证号码不能为空！</small>!",
                html: true
            });
            $("input[name='idCard']").focus();
            return;
        }
        if ($idCard.toString().trim().length != 18) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>身份证号码输入有误！</small>!",
                html: true
            });
            $("input[name='idCard']").focus();
            return;
        }
        if ($name.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>姓名不能为空！</small>!",
                html: true
            });
            $("input[name='name']").focus();
            return;
        }
        if ($pwd.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>密码不能为空！</small>!",
                html: true
            });
            $("input[name='pwd']").focus();
            return;
        }
        if ($pwd.toString().trim().length != 6) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>密码长度为6位！</small>!",
                html: true
            });
            $("input[name='pwd']").focus();
            return;
        }
        if ($sex.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>性别不能为空！</small>!",
                html: true
            });
            $("input[name='sex']").focus();
            return;
        }
        if ($sex != "男" && $sex != "女") {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>性别不合法！</small>!",
                html: true
            });
            $("input[name='sex']").focus();
            return;
        }
        if ($age.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>年龄不能为空！</small>!",
                html: true
            });
            $("input[name='age']").val("").focus();
            return;
        }
        let age = parseInt($age);
        if (age < 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>年龄不合法！</small>!",
                html: true
            });
            $("input[name='age']").val("").focus();
            return;
        }
        if ($phone.toString().trim().length == 0) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>电话号码不能为空！</small>!",
                html: true
            });
            $("input[name='phone']").focus();
            return;
        }
        if ($phone.toString().length != 11) {
            swal({
                title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>电话号码长度为11位！</small>!",
                html: true
            });
            $("input[name='phone']").focus();
            return;
        }
        // if ($verification.toString().trim().length == 0) {
        //     swal({
        //         title: "<img src='<%=basePath%>static/img/frontdesk/err.png'><small>请输入验证码</small>!",
        //         html: true
        //     });
        //     $("input[name='idCard']").focus();
        //     return;
        // }

        $.ajax({
            url: "<%=basePath%>front/register",
            type: "post",
            data: {
                idCard: $idCard,
                name: $name,
                pwd: $pwd,
                sex: $sex,
                age: $age,
                phone: $phone
            },
            dataType: "JSON",
            success: function (data) {
                $("#login :input").val("");
                swal("注册成功！", "您的卡号是" + data, "success");
                $("#modification").hide();
            }
        })
    }

    //短信验证
    <%--$(function () {--%>
    <%--    $(".deskilling").click(function () {--%>
    <%--        var $id = $(this).parent().parent().children("td:eq(0)").text();--%>
    <%--        var $name = $(this).parent().parent().children("td:eq(1)").text();--%>
    <%--        $("#treatment p span:eq(0)").text($id);--%>
    <%--        $("#treatment p span:eq(0)").css({"margin-right": "30px"})--%>
    <%--        $("#treatment p span:eq(1)").html($name);--%>
    <%--        $("#treatment").show();--%>
    <%--    });--%>
    <%--    &lt;%&ndash;$("#verification").click(function () {&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;let $phone = $("input[name='phone']").val();&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;$.ajax({&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    url: "<%=basePath%>VerificationServlet",&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    type: "post",&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    data: {&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;        phone: $phone&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    },&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    dataType: "JSON",&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    success: function (data) {&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;        jieshou = data;&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;    }&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;    &lt;%&ndash;})&ndash;%&gt;&ndash;%&gt;--%>
    <%--    &lt;%&ndash;})&ndash;%&gt;--%>
    <%--})--%>

</script>
</body>
</html>
